<template>
  <div class="renyuan">
    <!-- 面包絮 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理 </el-breadcrumb-item>
      <el-breadcrumb-item>转正管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 待转正 -->
    <el-tabs v-model="activeName" class="demo-tabs"  @tab-click="handleClick">
      <el-tab-pane label="待转正" name="first">
        <el-button type="primary" @click="$router.push('/index/daizhuanzhen')">新增待转正人员</el-button>
        <el-button @click="Exportexcel()">导出</el-button>
        <el-table :data="tableData" stripe style="width: 100%" id="out-table"  v-loading="loading"
        element-loading-text="Loading...">
          <el-table-column prop="date" label="序号"  type="index" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="bumen" label="部门" />
          <el-table-column prop="gangwei" label="岗位" />
          <el-table-column prop="shoujihao" label="手机号" width="120"/>
          <el-table-column prop="gonghao" label="工号" />
          <el-table-column prop="zhengjianbiaohao" label="证件号" width="180" />
          <el-table-column prop="gongzuoxingzhi" label="工作性质" />
          <el-table-column prop="ruzhiriqi" label="入职日期" />
          <el-table-column prop="zhuanzhenriqi" label="转正日期" />
          <el-table-column prop="zhuangtai" label="状态" />
          <el-table-column prop="shiyongqi" label="试用期" />
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <el-button type="primary" @click="fn(scope.row)">转正</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 已转正 -->
      <el-tab-pane label="已转正" name="second">
        <el-button @click="excel()">导出</el-button>
        <el-table :data="tableData1" stripe style="width: 100%" id="out-table1"  v-loading="loading"
        element-loading-text="Loading...">
          <el-table-column prop="date" label="序号" type="index" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="bumen" label="部门" />
          <el-table-column prop="gangwei" label="岗位" />
          <el-table-column prop="shoujihao" label="手机号" width="120" />
          <el-table-column prop="gonghao" label="工号" />
          <el-table-column prop="zhengjianbiaohao" label="证件号" width="180" />
          <el-table-column prop="gongzuoxingzhi" label="工作性质" />
          <el-table-column prop="ruzhiriqi" label="入职日期" />
          <el-table-column prop="zhuanzhenriqi" label="转正日期" />
          <el-table-column prop="zhuangtai" label="状态" />
          <el-table-column prop="shiyongqi" label="试用期" />
          <el-table-column prop="address" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="look(scope.row)">查看</el-button>
              <el-button link type="danger" size="small" @click="delrenyuan(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>
    <!-- 转正操作 -->
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">

      <h4>新增人员</h4>
      <div class="int">
        <el-form :model="ruleForm" label-width="120px" :rules="rules" ref="ruleFormRef" status-icon>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" width="200px" placeholder="请输入姓名" :disabled="true" />
          </el-form-item>
          <el-form-item label="手机号码" prop="shoujihao">
            <el-input v-model="ruleForm.shoujihao" placeholder="请输入手机号" :disabled="true" />
          </el-form-item>
          <el-form-item label="工号" prop="gonghao">
            <el-input v-model="ruleForm.gonghao" placeholder="请输入工号" :disabled="true" />
          </el-form-item>
          <el-form-item label="证件号码" prop="zhengjianbiaohao">
            <el-input v-model="ruleForm.zhengjianbiaohao" placeholder="请输入证件号码" :disabled="true" />
          </el-form-item>
          <el-form-item label="岗位" prop="gangwei">
            <el-select v-model="ruleForm.gangwei" placeholder="请选择岗位" :disabled="ruleForm.zhuangtai == '已转正' ? true : false">
              <el-option label="项目经理" value="项目经理" />
              <el-option label="科室主任" value="科室主任" />
              <el-option label="副总裁" value="副总裁" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门" prop="bumen">
            <el-select v-model="ruleForm.bumen" placeholder="请选择部门" :disabled="ruleForm.zhuangtai == '已转正' ? true : false">
              <el-option label="项目部" value="项目部" />
              <el-option label="产品部" value="产品部" />
              <el-option label="人力资源部" value="人力资源部" />
              <el-option label="财务部" value="财务部" />
              <el-option label="行政部" value="行政部" />

            </el-select>
          </el-form-item>
          <el-form-item label="工作性质" prop="gongzuoxingzhi">
            <el-select v-model="ruleForm.gongzuoxingzhi" placeholder="请选择工作性质"
              :disabled="ruleForm.zhuangtai == '已转正' ? true : false">
              <el-option label="正式" value="正式" />
              <el-option label="试用" value="试用" />
              <el-option label="实习" value="实习" />
              <el-option label="兼职" value="兼职" />
            </el-select>
          </el-form-item>
          <el-form-item label="试用期" prop="shiyongqi">
            <el-select v-model="ruleForm.shiyongqi" placeholder="个月" class="sel1" :disabled="true">
              <el-option label="一个月" value="一个月" />
              <el-option label="三个月" value="三个月" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="zhuangtai">
            <el-select v-model="ruleForm.zhuangtai" placeholder="请选择状态" :disabled="ruleForm.zhuangtai == '已转正' ? true : false">
              <el-option label="待转正" value="待转正" />
              <el-option label="已转正" value="已转正" />
            </el-select>
          </el-form-item>
          <el-form-item label="入职时间" prop="ruzhiriqi">
            <el-date-picker v-model="ruleForm.ruzhiriqi" type="date" placeholder="请选择时间" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD" style="width:450px" :disabled="true" />
          </el-form-item>
          <el-form-item label="转正时间" prop="zhuanzhenriqi">
            <el-date-picker v-model="ruleForm.ruzhiriqi" type="date" placeholder="请选择时间" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD" style="width:450px" :disabled="ruleForm.zhuangtai == '已转正' ? true : false" />
          </el-form-item>
          <el-form-item>
            <el-button @click="drawer = false">返回</el-button>
            <el-button type="primary" @click="patchzhuangtai()">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <!-- 加载效果 -->

  </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import * as request from '@/api/biao/biao'
import * as XLSX from 'xlsx'
import fs from 'file-saver'
var loading=ref(true)
var tableData = ref([])
var tableData1 = ref([])
var drawer = ref(false)
var activeName = ref('first')
var ruleFormRef = ref()
var ruleForm = ref({
  name: '',
  bumen: '',
  gangwei: '',
  shoujihao: '',
  gonghao: '',
  zhengjianbiaohao: '',
  gongzuoxingzhi: '',
  zhuangtai: '',
  ruzhiriqi: '',
  zhuanzhenriqi: '',
  shiyongqi: '',
})
//数据校验
var rules = ref({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  bumen: [
    { required: true, message: '请选择部门', trigger: 'blur' },
  ],
  gangwei: [
    { required: true, message: '请选择岗位', trigger: 'blur' },
  ],
  shoujihao: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
  ],
  gonghao: [
    { required: true, message: '请输入工号', trigger: 'blur' },
  ],
  zhengjianbiaohao: [
    { required: true, message: '请输入证件号码', trigger: 'blur' },
  ],
  gongzuoxingzhi: [
    { required: true, message: '请选择工作性质', trigger: 'blur' },
  ],
  zhuangtai: [
    { required: true, message: '请选择状态', trigger: 'blur' },
  ],
  ruzhiriqi: [
    { required: true, message: '请选择入职时间', trigger: 'blur' },
  ],
  zhuanzhenriqi: [
    { required: true, message: '请选择入职时间', trigger: 'blur' },
  ],
})
onMounted(async () => {
  var res = await request.zhuanzheng_login()
  console.log(res.data);
  loading.value=false
  tableData.value = res.data.filter(item => item.zhuangtai == '待转正')
  tableData1.value = res.data.filter(item => item.zhuangtai == '已转正')
})
//数据回显
var fn = (admin) => {
  drawer.value = true
  ruleForm.value = admin
}
//修改状态
var patchzhuangtai = async () => {
  var res = await request.patchzhuangtai_login(ruleForm.value)
  console.log(res);
  ElNotification({
    title: "通知",
    message: "转正操作成功",
    type: "success",
    duration: 2000,
  });
  var i =tableData.value.findIndex(item=>item.zhuangtai=='已转正')
  if(i!=-1)tableData.value.splice(i,1)
  drawer.value = false
}
var look = (admin) => {
  drawer.value = true
  ruleForm.value = admin
}
//删除人员
var delrenyuan = async (id) => {
  var res = await request.delzhuanzheng_login(id);
  ElNotification({
  title: "通知",
  message: "删除人员成功",
  type: "success",
  duration: 2000,
 });
  var i =tableData1.value.findIndex(item=>item.id==id)
  if(i!=-1)tableData1.value.splice(i,1)
  console.log(res);
};
//导出
var Exportexcel = () => {
    excelExport(document.querySelector('#out-table'), 'daizhuanzheng')
}
var excel = () => {
    excelExport(document.querySelector('#out-table1'), 'yizhuangzheng')
}
// 自动分析dom元素导出excel
var excelExport = (table, filename) => {
    // workbook,
    const wb = XLSX.utils.table_to_book(table)
    //  console.log(wb);
    /* Export to file (start a download) */
    const defaultCellStyle = {
        font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
        fill: { fgColor: { rgb: 'FFFFAA00' } },
    }
    const wopts = {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary',
        cellStyle: true,
        defaultCellStyle: defaultCellStyle,
        showGridLines: false,
    }
    const wbout = XLSX.write(wb, wopts)
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    fs.saveAs(blob, filename + '.xlsx')
}
var s2ab = (s) => {
    if (typeof ArrayBuffer !== 'undefined') {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
    } else {
        const buf = new Array(s.length);
        for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
    }
}
</script>
  
<style scoped>
.renyuan{
  width: 100%;
}
.renyuan h4 {
  display: inline-block;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid;
  margin-bottom: 15px;
}

.el-breadcrumb {
  margin-bottom: 20px;
}
.el-table{
  margin-top:20px;
}
</style>